<template>
	<view class="columnbox wdh-100 content">
		<view class="rowbox top-box jus wdh-100">
			<u-icon name="checkmark-circle-fill" color="#4fb08e" size="100rpx"></u-icon>
			<view class="columnbox als">
				<view class="top-title">已收款¥6.60</view>
				<view class="top-notice">请及时准备商品，顾客将到店自提商品</view>
			</view>
		</view>
		<view class="columnbox one-box">
			<view class="columnbox order-detail">
				<view class="wdh-100 rowbox jus">
					<view class="rowbox daodian-tag">到店自提</view>
				</view>
				<view class="rowbox wdh-100 spb">
					<view class="order-num">2701</view>
					<view class="count-title">2023/11/27 17:55自提</view>
				</view>
			</view>
			<view class="rowbox wdh-100 spb">
				<view class="rowbox">
					<image src="/static/logo.png" mode="aspectFill" class="user-img"></image>
					<view class="user-name">徐志</view>
				</view>
				<view class="rowbox">
					<view class="manage-btn" style="margin-right: 20rpx;">复制微信名</view>
					<view class="manage-btn">手机联系</view>
				</view>
			</view>
		</view>
		<view class="columnbox one-box">
			<view class="rowbox wdh-100 jus goods-num">共1件商品</view>
			<view class="rowbox wdh-100 spb order-info">
				<view class="rowbox">
					<image src="/static/logo.png" mode="aspectFill" class="user-img"></image>
					<view class="user-name">商品名称</view>
				</view>
				<view class="rowbox">
					<view class="goods-count">x1</view>
					<view class="goods-price">¥6.60</view>
				</view>
			</view>
			<view class="rowbox wdh-100 price-box">
				合计：<text>¥6.60</text>
			</view>
		</view>
		<view class="columnbox one-box als">
			<view class="order-detail-title">订单详情</view>
			<view class="order-message wdh-100">
				订单编号：1284923748923795
			</view>
			<view class="order-message wdh-100">
				下单日期：2023/11/27 17:55
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #f6f6f6;
		justify-content: flex-start;
	}

	.top-box {
		padding: 40rpx 20rpx;
	}

	.top-title {
		margin-left: 20rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.top-notice {
		margin-left: 20rpx;
		color: #969597;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.one-box {
		margin-bottom: 20rpx;
		width: 710rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 32rpx 32rpx;
	}

	.order-detail {
		width: 100%;
		border-bottom: #f6f6f6 solid 1px;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}

	.daodian-tag {
		background: #dfab49;
		color: #fff;
		font-size: 24rpx;
		line-height: 40rpx;
		padding: 0 10rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.order-num {
		font-size: 40rpx;
		font-weight: bold;
	}

	.user-img {
		width: 50rpx;
		height: 50rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.user-name {
		font-size: 28rpx;
		color: #000;
	}

	.manage-btn {
		font-size: 28rpx;
		color: #36638f;
	}

	.goods-num {
		font-size: 32rpx;
		margin-bottom: 40rpx;
	}

	.goods-count {}

	.goods-price {
		margin-left: 40rpx;
	}

	.order-info {
		border-bottom: #f6f6f6 solid 1px;
		padding-bottom: 20rpx;
	}

	.price-box {
		margin-top: 32rpx;
		justify-content: flex-end;
		font-size: 28rpx;

		text {
			font-weight: bold;
		}
	}

	.order-detail-title {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.order-message {
		font-size: 28rpx;
		line-height: 50rpx;
		color: #515151;
	}
</style>